<template>
  <div class="elementWrapper">
    <el-form :inline="true" :model="inputData" class="search-form">
      <el-form-item label="组件名称：" class="form-input">
        <el-input v-model="inputData.name" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getElementList">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="elementTable">
      <div class="table-title">
        <span class="table-title-text">组件管理</span>
      </div>
      <el-table :data="tableList" :cell-style="{color: '#333333'}"
        :header-cell-style="{background:'#F3F4F7',color:'#000000'}">
        <el-table-column type="index" label="ID" width="50" align="center" fixed="left"></el-table-column>
        <el-table-column prop="ontologyElementName" label="组件名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ontologyElementDescribe" label="组件描述" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="creatUserId" label="创建人" align="center" width=200></el-table-column>
        <el-table-column prop="creatTime" label="创建时间" width="240" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <i class="little-circle-blue" v-if="scope.row.state === 0"></i>
            <i class="little-circle-red" v-else></i>
            <span>{{ +scope.row.state === 0 ? "启用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width=200>
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" class="ontology-edit"
              @click.native.prevent="openEditElement(scope.row)">编辑</el-link>
            <el-link :underline="false" type="primary" class="ontology-edit"
              @click.native.prevent="checkElement(scope.row)">查看</el-link>
            <el-link :underline="false" type="primary" class="ontology-edit"
              @click.native.prevent="changestate(scope.row)">{{ +scope.row.state === 0 ? "禁用" : "启用" }}
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background small layout="total, prev, pager, next, sizes, jumper" :page-sizes="[10, 20, 30]"
        :total="total" :hide-on-single-page="!total" :page-size.sync="inputData.pageSize" :pager-count="7"
        :current-page="inputData.pageNum" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" @close="afterCloseDialog">
      <el-form :model="formData" :rules="rules" ref="dialogForm" label-position="right" label-width="120px">
        <el-form-item label="组件名称" class="dialog-inline">
          <el-input v-model="formData.ontologyElementName"  maxlength="50" show-word-limit :readonly="this.title === '编辑组件' ? false : true"></el-input>
          <!-- <el-input v-model="formData.ontologyElementName" v-if="this.title==='编辑组件'"></el-input>
          <div v-else>{{formData.ontologyElementName}}</div> -->
        </el-form-item>
        <el-form-item label="组件描述" class="dialog-inline">
          <el-input type="textarea" v-model="formData.ontologyElementDescribe"  maxlength="50" show-word-limit
            :readonly="this.title === '编辑组件' ? false : true" :autosize="textSizeConfig"></el-input>
          <!-- <el-input type="textarea" v-model="formData.ontologyElementDescribe" v-if="this.title === '编辑组件'" :autosize="textSizeConfig"></el-input>
          <div v-else>{{formData.ontologyElementDescribe}}</div> -->
        </el-form-item>
        <el-form-item label="缩略图" class="dialog-inline">
          <el-image :preview-src-list="[formData.ontologyElementImgUrl]" fit="cover" class="img-class"
            :src="formData.ontologyElementImgUrl"></el-image>
        </el-form-item>
      </el-form>
      <div v-if="this.title === '编辑组件'" class="footWraper">
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editElement">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "ElementManagement",
    components: {},
    data() {
      return {
        // src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        inputData: {
          name: "", // 组件名称
          pageNum: 1, // 页码
          pageSize: 10, // 每页条数
        },
        total: 0, // 数据总条数
        loading: false,
        tableList: [], // 本体列表
        formData: {
          state: 0,
          ontologyElementName: "", // 组件名称
          ontologyElementDescribe: "", // 组件描述
          ontologyElementImgUrl: "" // 组件图谱
        },
        title: "", // 弹窗标题
        dialogVisible: false, // 弹窗显隐
        // editDialog: false,
        // checkDialog: false,
        // dialogType: "edit",
        // dialogConfig: {
        //   edit: {
        //     title: '编辑组件',
        //     funcName: 'editElement'
        //   },
        //   check: {
        //     title: '查看组件',
        //     funcName: 'checkElement'
        //   }
        // },
        rules: {
          ontologyElementName: [{
            required: true,
            message: '请输入组件名称',
            trigger: 'blur'
          }],
          ontologyElementDescribe: [{
            required: true,
            message: '请输入组件描述',
            trigger: 'blur'
          }]
        },
        textSizeConfig: {
          minRows: 4,
          maxRows: 10
        },
      }
    },
    created() {
      this.total = this.tableList.length;
      // 获取组件列表
      this.getElementList();
    },
    methods: {
      async getElementList() {
        let params = this.inputData;
        let res = await this.$axios.post(this.$api.ontologyModel.xuekuiObj.getElementData, params);
        if (res.data.code !== 200) {
          this.tableList = [];
          this.$message.warning(res.data.message);
        } else {
          let data = res.data.data;
          this.tableList = data.list.map(item => {
            // 将毫秒数转为 YY-MM-DD hh-mm-ss 格式
            item.creatTime = item.creatTime ? new Date(item.creatTime).toLocaleDateString().replace(/\//g, "-") +
              " " +
              new Date(
                item.creatTime)
              .toTimeString().substr(0, 8) : "";
            return item
          });
          this.total = data.total;
          this.inputData.pageSize = data.pageSize;
          this.inputData.pageNum = data.pageNum;
        }
      },

      // 点击编辑按钮(打开弹窗)
      openEditElement(item) {
        this.title = "编辑组件";
        this.dialogVisible = true;
        const {
          state,
          ontologyElementId,
          ontologyElementName,
          ontologyElementDescribe,
          ontologyElementImgUrl
        } = item;
        this.formData.state = state;
        this.formData.ontologyElementId = ontologyElementId;
        this.formData.ontologyElementName = ontologyElementName;
        this.formData.ontologyElementDescribe = ontologyElementDescribe;
        this.formData.ontologyElementImgUrl = ontologyElementImgUrl;
      },

      // 编辑弹窗的确定
      editElement() {
        this.$refs.dialogForm.validate(async valid => {
          if (valid) {
            this.loading = true;
            let params = {
              id: this.formData.ontologyElementId,
              ...this.formData
            };
            let res = await this.$axios.post(this.$api.ontologyModel.xuekuiObj.editElement, params);
            if (res.data.code !== 200) {
              this.$message.warning(res.data.message);
              this.loading = false;
            } else {
              this.loading = false;
              this.dialogVisible = false;
              this.$message.success(res.data.message);
              this.getElementList();
            }
          } else {
            return false;
          }
        })
      },

      // 点击查看按钮
      checkElement(item) {
        this.title = "查看组件";
        this.dialogVisible = true;
        const {
          state,
          ontologyElementId,
          ontologyElementName,
          ontologyElementDescribe,
          ontologyElementImgUrl
        } = item;
        this.formData.state = state;
        this.formData.ontologyElementId = ontologyElementId;
        this.formData.ontologyElementName = ontologyElementName;
        this.formData.ontologyElementDescribe = ontologyElementDescribe;
        this.formData.ontologyElementImgUrl = ontologyElementImgUrl;
      },

      // 关闭弹窗后
      afterCloseDialog() {
        this.$refs.dialogForm.resetFields();
      },

      // 修改状态
      changestate(item) {
        let params = {
          id: item.ontologyElementId,
          ...item,
          state: item.state === 0 ? 1 : 0
        };
        if (+item.state === 0) { // 点击禁用时
          this.$confirm('是否禁用当前组件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.updatestate(params);
          }).catch(() => {});
        } else {
          this.updatestate(params);
        }
      },

      async updatestate(params) {
        let res = await this.$axios.post(this.$api.ontologyModel.xuekuiObj.editElement, params);
        if (res.data.code !== 200) {
          this.$message.warning(res.data.message);
          this.loading = false;
        } else {
          this.loading = false;
          this.dialogVisible = false;
          this.$message.success(res.data.message);
          this.getElementList();
        }
      },

      // 修改当前页码
      handleCurrentChange(page) {
        this.inputData.pageNum = page;
        this.getElementList();
      },
      // 修改每页条数
      handleSizeChange(e) {
        this.inputData.pageSize = e;
        this.getElementList();
      },
    },
  }
</script>

<style lang="scss" scoped>
  .elementWrapper {
    .search-form {
      padding: 16px 32px;
      border-radius: 4px;
      background: #ffffff;

      .el-form-item {
        margin-bottom: 0;
      }

      .form-input {
        margin-right: 32px;

        /deep/ .el-input__inner {
          width: 240px;
          height: 32px;
          background: #ffffff;
          border-radius: 2px;
          border: 1px solid #e0e0e0;
        }
      }
    }

    .elementTable {
      margin-top: 16px;
      padding: 16px 32px 64px;
      border-radius: 4px;
      background: #ffffff;

      .table-title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title-text {
          border-left: 5px solid $--color-primary;
          padding-left: 10px;
          margin: 8px 0;
          font-size: 16px;
          line-height: 16px;
        }

        margin-bottom: 10px;
      }

      .little-circle-blue {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #55C898;
        position: relative;
        right: 4px;
        top: -2px;
      }

      .little-circle-red {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #EE5564;
        position: relative;
        right: 6px;
        top: -2px;
      }

      .page-wrapper {
        margin-top: 28px;
        display: flex;
        justify-content: flex-end;
        color: rgba(0, 0, 0, 0.65);

        .data-counter {
          font-weight: 400;
          line-height: 32px;
          margin-right: 24px;
        }


        /deep/ .el-pager .number {
          min-width: 28px;
          height: 28px;
          border-radius: 2px;
          border: 1px solid rgba(0, 0, 0, 0.15);
          margin: 0 4px;
          cursor: pointer;
        }
      }

      .ontology-edit {
        padding: 0 10px;

        &+.ontology-edit {
          border-left: 1px solid #dddddd;
        }
      }

      /deep/ .el-table__append-wrapper {
        padding: 10px;
      }

      .el-pagination {
        float: right;
        margin-top: 20px;

        .form-input /deep/ .el-input {
          width: 200px;
        }

        /deep/ .el-input__inner {
          height: 22px;
        }
      }
    }

    .footWraper {
      text-align: right;
    }

    /deep/ .el-dialog {
      width: 500px;
      border-radius: 5px;
    }

    .dialog-inline {
      /deep/ .el-form-item__content {
        width: 300px;
      }

      /deep/ .img-class {
        width: 100%;
      }

      button.el-button {
        background-color: $--color-primary !important;
        color: #fff !important;
        line-height: 1.2;
      }
    }

    .el-image {
      width: 250px;
      height: 250px;
      border: 1px solid rgb(220, 223, 230);
      border-radius: 4px;
    }
  }
</style>